<template>

      <div class="item">
        <img v-lazy="imgUrl">
        <div class="name">{{ name }}</div>
        <div class="icon-24gf-play iconfont playcount">{{ parseInt(playcount / 10000) }}万</div>
        <span class="icon-24gf-play iconfont play"></span>
      </div>

</template>


<script setup>
const props = defineProps(["songSheetInfo","imgUrl","playcount","name"])
// onMounted(() => {
//
//
//   let contain = document.getElementById('contain')
//
//   contain.addEventListener('touchstart', (e) => {
//         contain.style.transition = '';
//         let clickX = e.changedTouches[0].screenX;
//         let left = contain.offsetLeft;
//         contain.addEventListener('touchmove', (e) => {
//
//           contain.style.left = left - clickX + e.changedTouches[0].screenX + 'px';
//
//
//         })
//       }
//       ,
//       false
//   );
//   contain.addEventListener('touchend', () => {
//         if (contain.offsetLeft > 0) {
//           contain.style.left = '10px'
//           contain.style.transition = 'all 1s';
//           return;
//         }
//         if (contain.offsetLeft < -424) {
//           contain.style.left = '-424px'
//           contain.style.transition = 'all 1s';
//           return;
//         }
//
//       }
//       ,
//       false
//   );
//
// })


// touchstart 手指按到屏幕上
// touchmove 手指在屏幕上滑动
// touchend 手指离开屏幕
// touchcancle 特殊情况下关闭/退出时触发
</script>


<style scoped lang="scss">

    //overflow: hidden;
    .item {
      position: relative;
      padding: 5px;

      img {
        border-radius: 10px;
        width: 120px;
      }

      .name {
        font-size: 12px;
        max-width: 120px;
        min-height: 32px;
        color: #333;
        overflow: hidden; /*内容溢出隐藏*/
        text-overflow: ellipsis; //*溢出的文本显示为...*/
        display: -webkit-box; /*将div转换为盒子模型*/
        -webkit-line-clamp: 2; /*设置div的文本为2行*/
        -webkit-box-orient: vertical; /*从顶部向底部垂直布置子元素*/
      }

      .iconfont {
        color: #fff;
      }

      .playcount {
        font-weight: 550;
        top: 10px;
        right: 12px;
        position: absolute;
        font-size: 12px;
      }

      .play {
        font-size: 20px;
        bottom: 45px;
        right: 12px;
        position: absolute;
      }
    }


</style>
